 <script setup lang="ts">
const props = defineProps<{
    title: string
}>()
const emit = defineEmits<{
    (e: 'click'): void
}>()
</script>

<template>
    <el-card class="big-button" shadow="hover" @click="emit('click')">
        <div class="btn-inner">
            <el-text size="large" tag="b">{{ props.title }}</el-text>
        </div>
    </el-card>
</template>

 <style scoped>
 .big-button {
   cursor: pointer;
   background-color: #bcbfc9; /* 更换按钮的背景颜色 */
   border: 1px solid #ffffff; /* 更换按钮的边框样式 */
   color: #ffffff; /* 更换按钮的文本颜色 */
 }

 .btn-inner {
   width: 100%;
   margin: 20px;
   display: flex;
   justify-content: left;
   align-items: center;
 }

 /* 修改按钮的悬停效果 */
 .big-button:hover {
   background-color: #ddd; /* 悬停时的背景颜色 */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 悬停时的阴影效果 */
 }
 </style>